import React, { useState, useEffect } from 'react'
import './list.css'
import { KoubeiOutline, HeartOutline, AppstoreOutline } from 'antd-mobile-icons'
import axios from 'axios'
import {useNavigate} from 'react-router-dom'
const List = () => {
    //跳转
    const navigate = useNavigate()
    //倒计时
    const [hours, setHours] = useState('05');
    const [minutes, setMinutes] = useState('40');
    const [seconds, setSeconds] = useState('12');
    useEffect(() => {
        // 设置结束时间（例如：5小时40分钟12秒后）
        const endTime = Date.now() + (parseInt(hours) * 60 * 60 * 1000)
            + (parseInt(minutes) * 60 * 1000)
            + (parseInt(seconds) * 1000);

        const intervalId = setInterval(() => {
            const now = Date.now();
            const distance = endTime - now;

            if (distance > 0) {
                const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const s = Math.floor((distance % (1000 * 60)) / 1000);

                setHours(h < 10 ? `0${h}` : h);
                setMinutes(m < 10 ? `0${m}` : m);
                setSeconds(s < 10 ? `0${s}` : s);
            } else {
                clearInterval(intervalId);
                alert("倒计时结束！");
            }
        }, 1000);

        return () => clearInterval(intervalId); // 清除定时器
    }, [hours, minutes, seconds]);
    // 获取列表数据
    const [list, setlist] = useState([])
    const getlist = () => {
        axios.get('http://localhost:3000/chen_getlist').then(res => {
            setlist(res.data.data)
        })
    }
    useEffect(() => {
        getlist()
    }, [])
    // 随机选择四个列表项
    const randomList = React.useMemo(() => {
        if (list.length === 0) return [];
        const shuffled = list.slice();
        for (let i = shuffled.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled.slice(0, 4);
    }, [list]);
    // 随机选择三个列表项
    const sansanList = React.useMemo(() => {
        if (list.length === 0) return [];
        const shuffled = list.slice();
        for (let i = shuffled.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled.slice(0, 3);
    }, [list]);

    //零元购买
    const lyg = () =>{
        navigate('/xq')
    }
    //点击减重
    const jz = () =>{
        navigate('/xq1')
    }

    //选中商品跳转详情
    const tiao = (item) =>{
        navigate('/xq3')
        localStorage.setItem('item',JSON.stringify(item))
    }

    return (
        <div style={{ backgroundColor: '#f2f2f2',width:"100%" ,height:'100%'}}>
            <div className='list-div'>
                <ul className='list-ul'>
                    <li className='list-li'>健康优选</li>
                    <li className='list-li1'>●</li>
                    <li className='list-li1'>正品保障</li>
                    <li className='list-li1'>●</li>
                    <li className='list-li1'>科学严审</li>
                    <li className='list-li1'>●</li>
                    <li className='list-li1'>售后无忧</li>
                </ul>
                <ul className='list-ul' style={{marginTop:'0.3rem'}}>
                    <li onClick={() => navigate('/yxhw')}>
                        <p className='list-p' style={{ backgroundColor: '#096dd9' }}>
                            <HeartOutline />
                        </p>
                        <p>严选好物</p>
                    </li>
                    <li onClick={() => navigate('/xpzq')}>
                        <p className='list-p' style={{ backgroundColor: '#f5222d' }}>
                            <KoubeiOutline />
                        </p>
                        <p>新品专区</p>
                    </li>
                    <li onClick={()=>navigate('/ydjs')}>
                        <p className='list-p' style={{ backgroundColor: '#13c2c2' }}>
                            <img src="https://ts1.tc.mm.bing.net/th/id/R-C.effffa2f1d23f1597858ebd37a42cb72?rik=bc6x8o4H8%2foK3Q&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f03%2f12%2f387f1591f43287eb811404cd72bce12c.jpg&ehk=KxgkaV6T%2bNSYLOOU3eWy1ewBiJS%2f5279%2bFwwuGjrpDo%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" alt="" className='list-img' />
                        </p>
                        <p>运动健身</p>
                    </li>
                    <li onClick={()=>navigate('/qbfl')}>
                        <p className='list-p' style={{ backgroundColor: '#f59a23' }} >
                            <AppstoreOutline />
                        </p>
                        <p>全部分类</p>
                    </li>
                </ul>
            </div>
            <div className='list-div1'>
                <p className='list-li' style={{ marginLeft: '0.2rem', lineHeight: '1rem', marginBottom: '0.5rem' }}>猜你喜欢</p>
                <div onClick={lyg}>
                    <img src="/1.png" alt="" className='list-img1' />
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>
                            <p className='list-p1'>增强抵抗力 运动送手环</p>
                            <h1 className='list-h1'>0元购手环</h1>
                            <p className='list-p2'>立即查看</p>
                        </div>
                        <img src="https://m.360buyimg.com/n12/jfs/t5527/89/1130739800/141944/9d5bec8/590c2e46N8e512509.jpg!q70.jpg" alt="" className='list-img2' />
                    </div>
                </div>
                <div style={{marginTop:'0.6rem'}} onClick={jz}>
                    <img src="/2.png" alt="" className='list-img1' />
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <div>
                            <p className='list-p1'>想要记录减重过程，记录每一克变化</p>
                            <h2 className='list-h1'>智能体脂称来帮你</h2>
                            <p className='list-p3'>
                                <span className='list-span'>￥159</span>
                                <span><del>￥249</del></span>
                            </p>
                        </div>
                        <img src="https://ts1.tc.mm.bing.net/th/id/R-C.8fe71b79f918cea5da26aae5f9e788e3?rik=CTcYdos4FTWFuQ&riu=http%3a%2f%2fuimg.ugoshop.com%2fimages%2f201706%2fgoods_img%2f22054_P_1497666419421.jpg&ehk=RPRxSWnf3%2fvdcWIBGh5bKmdCM5QdjZvBvtPN5w36XhE%3d&risl=&pid=ImgRaw&r=0" alt="" className='list-img2' />
                    </div>
                </div>
            </div>
            <div className='list-div1' style={{height:'10rem'}}>
                <div className='list-li' style={{ marginLeft: '0.3rem', lineHeight: '1rem', marginBottom: '0.5rem', display: 'flex' }}>
                    <p style={{ marginRight: '0.4rem' }}>限量秒杀</p>
                    <p>
                        <span className='list-span1'>{hours}</span>:
                        <span className='list-span1'>{minutes}</span>:
                        <span className='list-span1'>{seconds}</span>
                    </p>
                </div>
                <div className='list-div2'>
                    {randomList.map((item, index) => {
                        return (
                            <div key={index} className='list-div3' onClick={()=>tiao(item)} >
                                <img src={item.img} alt="" className='list-img3' />
                                <p>{item.name}</p>
                                <p className='list-p4'>
                                    <span className='list-span2'>￥{item.xprice}</span>
                                    <span className='list-span3'>
                                        <del>￥{item.yprice}</del>
                                    </span>
                                </p>
                                <p>
                                    <span className='list-span4'>马上抢</span>
                                    <span className='list-span5'>已抢{item.yishou}件</span>
                                </p>
                            </div>
                        )
                    })}
                </div>
            </div>
            <div className='list-div1'>
                <div className='list-li' style={{ marginLeft: '0.4rem', lineHeight: '1rem', marginBottom: '0.2rem', display: 'flex' }}>
                    <p style={{ marginRight: '2rem' }}>热销榜单</p>
                </div>
                {sansanList.map((item, index) => {
                    return (
                        <div key={index} className='list-div4' onClick={()=>tiao(item)}>
                            <img src={item.img} alt="" className='list-img4'/>
                            <div style={{marginRight:"0.4rem"}}>
                                <p>{item.name}</p>
                                <p className='list-p4'>{item.name}{item.name}{item.name}</p>
                                <p className='list-p4'>
                                    <span className='list-span2'>￥{item.xprice}</span>
                                    <span className='list-span4'>马上抢</span>
                                </p>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}
export default List